<template>
  <view class="search-container">
    <image
      class="choice-icon"
      mode="aspectFit"
      src="../../static/images_qccx/search.png"
    />
    <u-input
      class="number-input"
      height="48"
      :placeholder="placeholder"
      v-model="searchVal"
    />
  </view>
</template>
<script>
export default {
  data() {
    return {
      searchVal: '',
    };
  },
  props: {
    placeholder: {
      type: String,
      default: '请输入'
    }
  },
  watch: {
    searchVal() {
      this.$emit('search', this.searchVal);
    }
  },
};
</script>
<style lang="scss" scoped>
  .search-container {
    width: 100%;
    height: 80rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 4rpx 60rpx 0rpx rgba(201,205,216,0.1265);
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    padding: 16rpx 24rpx;
    display: flex;
    image {
      width: 48rpx;
      height: 48rpx;
    }
  }
</style>
